<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/spark-md5/spark-md5.js"></script>
</head>
<body>
    <input type="file" name="file" id="file">
    <script>
        function fib(n){
            if(n == 0){
                return 0;
            }else if(n == 1){
                return 1;
            }
            return fib(n-2) + fib(n-1);
        }
        file.onchange = function(ev){
            console.log(ev);
            let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
            let file = ev.target.files[0];
            const chunkSize = 100;
            const chunks = Math.ceil(file.size/chunkSize);
            let currentChunk = 0;
            const spark = new SparkMD5.ArrayBuffer();
            const fileReader = new FileReader();
            fileReader.onload = function(e){
                console.log(e.target.result);
                spark.append(e.target.result);
                currentChunk++;
                if(currentChunk < chunks){
                    loadNext();
                }else{
                    var r = spark.end();
                    console.log(r)
                }
            } 
            fileReader.onerror = function () {
                console.warn('oops, something went wrong.');
            };

            function loadNext() {
                var start = currentChunk * chunkSize,
                    end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

                fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
            }

            loadNext();

        }
    </script>
</body>
</html>